<template>
    <div id="centreLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-pie"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">总体完成率</span>
          <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
        </div>
      </div>
      <div class="d-flex jc-center">
        <grateBar id="grateBar" height="200px" width="200px" :option="effectionOption" style="margin:30px;"/> 
      </div>
    </div>
  </div>   
</template>

<script>
 import grateBar from '@/components/echart/grateBar'

 
 
 export default {
    data() {
      return {
        tabPosition: 'left',
        effectionOption:null
      };
    },
    name: 'ProblemModule',
    components: { grateBar },
    created() {
      this.getEffectionOption()
      console.info(456+this.proKindOption)
    },
    methods: {
      getEffectionOption(){
        //从后台获取数据
        this.effectionOption={
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                top: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['设备', '调度', '整体'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '完成率',
                    type: 'bar',
                    barWidth: '60%',
                    data: [30, 52, 10]
                }
            ]
        }
      }
    }
  };
</script>
<style scoped>
.chart-container{
  position: relative;
  width: 100%;
  height: 100%;
}
#centreLeft1 {
  padding: 0.2rem;
  height: 5.125rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 4.8125rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>